import { useState } from 'react';
import './index.css';
function BaseUse() {
	const [isShow, setIsShow] = useState(false);
	const changeIsShow = <T,>(params: T) => {
		console.log(params, 'params');
		setIsShow(isShow => (isShow = !isShow));
	};
	const myHTML = `<div>哈哈哈</div>`;
	return (
		<div>
			<h1>基本使用</h1>
			{/*  插值语法 */}
			<div>{'test String'}</div>
			<div>{123}</div>
			// 布尔值不会直接展示，可使用三元展示对应内容
			<div>{isShow ? '1' : '0'}</div>
			<button onClick={() => changeIsShow(123)}>change</button>
			{/* 模拟 v-html */}
			<div dangerouslySetInnerHTML={{ __html: myHTML }}></div>
			<hr />
			{/* 2： style样式和类名 */}
			<StyleTest />
			{/* 对象 &数组 需要序列后（JSON.stringify）展示全部 */}
			<ObjectShow />
		</div>
	);
}

function StyleTest() {
	const cls = 'test';
	const style = {
		color: 'blue',
		fontWeight: '700',
	};
	return (
		<div>
			<div className={`${cls}  aa bb cc`}>动态class</div>
			<div style={style}>动态style</div>
		</div>
	);
}

function ObjectShow() {
	const obj = {
		name: 'vae',
		age: 12,
	};
	const arr = ['jack', 'tom', 'jane'];
	return (
		<>
			<div> {JSON.stringify(obj)}</div>
			<div>{JSON.stringify(arr)}</div>
			<ul>
				{arr.map(item => (
					<li key={item}>{item}</li>
				))}
			</ul>
		</>
	);
}

export default BaseUse;
